<template>
  <div>
    <el-card>
      <div>
        <el-input v-model="userInfo.username" clearable placeholder="根据用户名搜索" style="width:200px;" type="text">
        </el-input>
        <el-button size="small" style="margin-left: 15px" @click="getUserInfoBancel">清空</el-button>
        <el-button size="small" type="primary" @click="getUserInfo">搜索</el-button>
        <el-button class="el-icon-edit" size="small" style="float: right; " type="success" @click="addUser">
          新增用户
        </el-button>
      </div>
      <el-alert
        :closable="false"
        show-icon
        type="info">
        <template>
          共有{{ counts }}条记录
        </template>
      </el-alert>
      <el-table :data="list" :highlight-current-row="true">
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="邮箱" prop="email"></el-table-column>
        <el-table-column align="center" label="联系电话" prop="phone"></el-table-column>
        <el-table-column align="center" label="用户名" prop="username"></el-table-column>
        <el-table-column align="center" label="权限组名称" prop="permission_group_title"></el-table-column>
        <el-table-column align="center" label="角色" prop="role"></el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{row}">
            <el-button circle class="el-icon-edit" type="primary"
                       @click="editUser(row)"></el-button>
            <el-button v-if="row.id!==2" circle class="el-icon-delete" type="danger"
                       @click="removeUser(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件-->
      <el-row justify="end" style="margin-top: 20px" type="flex">
        <el-pagination
          :page-size="userInfo.pagesize"
          :page-sizes="[10, 20, 30, 50]"
          :total="counts"
          layout=" prev,pager,next,sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 新增用户弹层-->
    <el-dialog :visible="showDialog" title="创建用户" @close="btnCancel">
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="70px">
        <el-row justify="center" type="flex">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="addForm.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="addForm.email"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="addForm.password"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role">
              <el-input v-model="addForm.role"></el-input>
            </el-form-item>
            <el-form-item label="权限组名称" label-width="90px">
              <el-select v-model="addForm.permission_group_id" placeholder="请选择">
                <el-option v-for="item in permissionname" :key="item.id" :label="item.title"
                           :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="addForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="介绍" label-width="70px" type="textarea">
              <el-input v-model="addForm.introduction" placeholder="Please input" type="textarea">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row justify="end" type="flex">
        <el-col :span="10">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!--  修改用户弹层-->
    <el-dialog :visible="editshowDialog" title="修改用户" @close="editshowDialog=false">
      <el-form ref="editFormRef" :model="editForm" :rules="editFormRules" label-width="70px">
        <el-row justify="center" type="flex">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="editForm.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="editForm.password"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role">
              <el-input v-model="editForm.role"></el-input>
            </el-form-item>
            <el-form-item label="权限组名称" label-width="90px">
              <el-select v-model="editForm.permission_group_id" placeholder="请选择">
                <el-option v-for="item in permissionname" :key="item.id" :label="item.title"
                           :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="editForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="介绍" label-width="70px" type="textarea">
              <el-input v-model="editForm.introduction" placeholder="Please input" type="textarea">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row justify="end" type="flex">
        <el-col :span="10">
          <el-button @click="editCancel">取 消</el-button>
          <el-button type="primary" @click="editOk">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { add, list, remove, update,simple } from '@/api/base/users'

export default {
  name: 'users',
  data () {
    return {
      counts: 0,
      showDialog: false,
      editshowDialog: false,
      id: '',
      list: [],
      userInfo: {
        username: '',
        pagesize: 10,
        page: 1
      },
      addForm: {
        // account: '',
        username: '',
        email: '',
        password: '',
        permission_group_id: '',
        phone: '',
        role: '',
        introduction: ''
      },
      editForm: {
        username: '123',
        email: '123@qq.com',
        password: '2312',
        permission_group_id: 2,
        phone: '',
        role: '',
        introduction: ''
      },
      addFormRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9-A-Za-zd]+([-_.][0-9-A-Za-zd]+)*@([0-9-A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/,
            message: '邮箱格式不对',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      },
      editFormRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9-A-Za-zd]+([-_.][0-9-A-Za-zd]+)*@([0-9-A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/,
            message: '邮箱格式不对',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      },
      permissionname: [{
        id: 2,
        title: '超级管理员组'
      },
      {
        id: 3,
        title: '编辑组'
      }]
    }
  },

  created () {
    this.getList()
  },

  methods: {
   async addUser(){
     const res = await simple()
     // console.log(res)
     this.permissionname = res.data
     this.showDialog = true
   },
    async removeUser (id) {
      const res = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      await remove(id)
      await this.getList()
      this.$message.success('删除成功')
    },
    editCancel () {
      this.editshowDialog = false
    },
    async editOk () {
      await this.$refs.editFormRef.validate()
      await update(this.editForm)
      this.editCancel()
      await this.getList()
      this.$message.success('修改成功')
    },
    editUser (row) {
      this.editshowDialog = true
      this.editForm = {
        id: row.id,
        username: row.username,
        email: row.email,
        password: '',
        permission_group_id: row.permission_group_id,
        phone: row.phone,
        role: row.role,
        introduction: ''
      }
    },
    handleSizeChange (newSize) {
      this.userInfo.pagesize = newSize
      this.getList(this.userInfo)
    },
    handleCurrentChange (newPage) {
      this.userInfo.page = newPage
      this.getList(this.userInfo)
    },
    async getList (data) {
      const res = await list(data)
      this.list = res.data.list
      this.counts = res.data.counts
    },
    getUserInfo () {
      this.getList(this.userInfo)
    },
    getUserInfoBancel () {
      this.getList()
      this.userInfo = {
        username: '',
        pagesize: 10
      }
    },
    btnCancel () {
      this.showDialog = false
    },
    async btnOk () {
      await this.$refs.addFormRef.validate()
      await add(this.addForm)
      await this.$refs.addFormRef.resetFields()
      this.btnCancel()
      await this.getList()
      this.$message.success('创建成功')
      this.addForm = {
        // account: '',
        username: '',
        email: '',
        password: '',
        permission_group_id: '',
        phone: '',
        role: '',
        introduction: ''
      }
    }
  }
}
</script>

<style lang='less' scoped>
/deep/ .el-input--medium .el-input__inner {
  height: 32px;
}

.el-alert {
  margin: 20px 0
}

/deep/ .el-pagination__jump {
  margin: 0;
}
</style>
